<template>
    <div v-loading="loading">
        <h2>{{ assignInfo?.title }}</h2>
        <div class="activity-dates" v-if="assignInfo">
            <p class="date-p">
                <strong>{{ $t('mod.assign.view.date_1') }}</strong> {{ formatLoginTime(assignInfo?.start_date) }}
            </p>
            <p class="date-p">
                <strong>{{ $t('mod.assign.view.date_2') }}</strong> {{ formatLoginTime(assignInfo?.end_date) }}
            </p>
        </div>
        <div class="tag-list">
            <!-- <el-tag color="#28A745" effect="dark" v-if="roleStore.isStudent">完成： 繳交作業</el-tag> -->
            <el-tag color="#6C757D" effect="dark" v-if="roleStore.isTeacher">{{ $t('mod.assign.view.con_1') }}</el-tag>
        </div>
        <div class="rich-box" v-html="assignInfo?.description"></div>
        <div class="submission-status-table" v-if="roleStore.isStudent">
            <h3>{{ $t('mod.assign.view.submission_status.label_1') }}</h3>
            <div class="submission-summary-table">
                <div class="summary-item">
                    <div class="label">{{ $t('mod.assign.view.submission_status.label_1') }}</div>
                    <div class="ted">{{ $t(statusText) }}</div>
                </div>
                <div class="summary-item">
                    <div class="label">{{ $t('mod.assign.view.submission_status.label_2') }}</div>
                    <div class="ted">{{ $t(ratingStatusText) }}</div>
                </div>
                <div class="summary-item" v-if="assignInfo?.submission?.late_date">
                    <div class="label">{{ $t('mod.assign.view.submission_status.label_3') }}</div>
                    <div class="ted" v-if="assignInfo">{{ formatLoginTime(assignInfo.submission.late_date) }}</div>
                </div>
                <div class="summary-item">
                    <div class="label">{{ $t('mod.assign.view.submission_status.label_4') }}</div>
                    <div class="ted">{{ $t(remainingTimeText) }}</div>
                </div>
                <div class="summary-item">
                    <div class="label">{{ $t('mod.assign.view.submission_status.label_5') }}</div>
                    <div class="ted">
                        <table>
                            <tbody>
                                <tr v-for="(item, index) in assignInfo?.criteria" :key="index">
                                    <td>{{ item.title }}</td>
                                    <td>{{ item.negative }}</td>
                                    <td>{{ item.positive }}</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
                <div class="summary-item">
                    <div class="label">{{ $t('mod.assign.view.submission_status.label_6') }}</div>
                    <div class="ted" v-if="assignInfo?.submission?.updated_at">{{ formatLoginTime(assignInfo.submission.updated_at) }}</div>
                </div>
                <div class="summary-item" v-if="assignInfo?.submission && assignInfo?.submission.file_url">
                    <div class="label">{{ $t('mod.assign.view.submission_status.label_7') }}</div>
                    <div class="ted">
                        <div class="file-upload-submission">
                            <div class="file-time">
                                <a :href="assignInfo?.submission?.file_url" target="_blank" class="file-name">
                                    <el-icon size="16" color="#4c4c4c"><Reading /></el-icon>
                                    <span>{{ assignInfo?.submission?.file_url.split('/').pop() }}</span>
                                </a>
                                <div class="file-up-time">{{ formatLoginTime(assignInfo.submission.upload_time) }}</div>
                            </div>
                            <h4>{{ $t('mod.assign.view.submission_status.label_7_submission.tit') }}</h4>
                            <table>
                                <tbody>
                                    <tr>
                                        <td width="120">{{ $t('mod.assign.view.submission_status.label_7_submission.table_label_1') }}</td>
                                        <td>{{ assignInfo.submission?.similarity_status }}</td>
                                    </tr>
                                    <tr>
                                        <td width="120">{{ $t('mod.assign.view.submission_status.label_7_submission.table_label_2') }}</td>
                                        <td>{{ assignInfo?.submission ? assignInfo?.submission?.similarity_per : '-' }}</td>
                                    </tr>
                                </tbody>
                            </table>
                            <p class="tips">*{{ $t('mod.assign.view.submission_status.label_7_submission.tip') }}</p>
                            <div class="refresh-btn">
                                <el-button circle icon="Refresh" @click="getAssignInfo"></el-button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <template v-if="(!assignInfo?.submission || !assignInfo?.submission?.is_locked) && !isShowSubmission">
                <div class="btn-list">
                    <template v-if="assignInfo?.submission?.file_url">
                        <el-upload :show-file-list="false" :before-upload="beforeAvatarUpload" :http-request="handleUpload">
                            <el-button color="#F06423">{{ $t('mod.assign.view.submission_status.btn_text_1') }}</el-button>
                        </el-upload>
                        <el-button color="#F06423" @click="delHandle">{{ $t('mod.assign.view.submission_status.btn_text_2') }}</el-button>
                        <p class="tips">{{ $t('mod.assign.view.submission_status.btn_text_tip_1') }}</p>
                    </template>
                    <el-upload :show-file-list="false" :before-upload="beforeAvatarUpload" :http-request="handleUpload" v-else>
                        <el-button color="#F06423">{{ $t('mod.assign.view.submission_status.btn_text_3') }}</el-button>
                    </el-upload>
                </div>
                <div class="btn-list">
                    <el-button color="#F06423" @click="showOrHideSubmission(true)">{{ $t('mod.assign.view.submission_status.btn_text_4') }}</el-button>
                    <p class="tips">{{ $t('mod.assign.view.submission_status.btn_text_tip_2') }}</p>
                </div>
            </template>
            <div class="confirm-submission" v-if="isShowSubmission">
                <div class="submission-left">
                    <h3>確認繳交作業</h3>
                </div>
                <div class="submission-right">
                    <div class="checkbox-wrap" :class="isBorderRed ? 'red-boder' : ''" @change="checkboxChange">
                        <el-checkbox v-model="isChecked" label="" size="large" />
                        <span>This submission is my own work, except where I have acknowledged the use of the works of other people.</span>
                    </div>
                    <p class="tips-txt1">-必須的</p>
                    <p class="tips-txt2">您確定要繳交作業並請求評分嗎？一旦這麼做，您將不能再修改作業。</p>
                    <div class="submission-btns">
                        <el-button color="#F06423" @click="submitHandle">{{ $t('forgetPwd.btn2_text') }}</el-button>
                        <el-button type="info" @click="showOrHideSubmission(false)">{{ $t('golbal.btn_text_3') }}</el-button>
                    </div>
                </div>
            </div>
        </div>
        <div class="submission-status-table" v-else>
            <h3>{{ $t('mod.assign.view.submission_summary.tit') }}</h3>
            <div class="submission-summary-table">
                <div class="summary-item">
                    <div class="label">{{ $t('mod.assign.view.submission_summary.label_1') }}</div>
                    <div class="ted">{{ assignInfo?.is_hidden ? '是' : '否' }}</div>
                </div>
                <div class="summary-item">
                    <div class="label">{{ $t('mod.assign.view.submission_summary.label_2') }}</div>
                    <div class="ted">{{ assignInfo?.stats.participants }}</div>
                </div>
                <div class="summary-item">
                    <div class="label">{{ $t('mod.assign.view.submission_summary.label_3') }}</div>
                    <div class="ted">{{ assignInfo?.stats.drafts }}</div>
                </div>
                <div class="summary-item">
                    <div class="label">{{ $t('mod.assign.view.submission_summary.label_4') }}</div>
                    <div class="ted">{{ assignInfo?.stats.submitted }}</div>
                </div>
                <div class="summary-item">
                    <div class="label">{{ $t('mod.assign.view.submission_summary.label_5') }}</div>
                    <div class="ted">{{ assignInfo?.stats.need_grade }}</div>
                </div>
                <div class="summary-item">
                    <div class="label">{{ $t('mod.assign.view.submission_summary.label_6') }}</div>
                    <div class="ted">{{ remainingTimeText }}</div>
                </div>
            </div>
            <div class="btn-list">
                <el-button color="#34434D" @click="goPage(`/console/course/${courseId}/unit/${unitId}/assign/${assignId}/report`)">{{ $t('mod.assign.view.btn_text_1') }}</el-button>
                <el-button color="#F06423" @click="goPage(`/console/course/${courseId}/unit/${unitId}/assign/${assignId}/correct`)">{{ $t('mod.assign.view.btn_text_2') }}</el-button>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { computed, onMounted, ref, watch } from 'vue'
import { useRoute } from 'vue-router'

import { ElMessage, type UploadRequestOptions } from 'element-plus'

import AssignService from '@/api/assign'
import type { AssignInfo } from '@/types/assign'

import { useRoleStore } from '@/stores/role'

import { formatLoginTime, goPage } from '@/utils/global'

import { useI18n } from 'vue-i18n'
import type { SupportedLocales } from '@/locales/i18n'
import type { MessageSchema } from '@/types/i18n'

const route = useRoute()
const roleStore = useRoleStore()
const assignId = computed(() => Number(route.params.assignId))
const courseId = computed(() => Number(route.params.courseId))
const unitId = computed(() => Number(route.params.unitId))
const loading = ref(false)
const { t } = useI18n<{ message: MessageSchema }, SupportedLocales>()

const isChecked = ref(false);
const isShowSubmission = ref(false);
const isBorderRed = ref(false)
const showOrHideSubmission = (val: boolean) => {
    isShowSubmission.value = val;
}
const checkboxChange = () => {
    if(isChecked.value == true){
        isBorderRed.value = false
    }
}


const assignInfo = ref<AssignInfo>()
// 缴交状态
const statusText = computed(() => {
    if (!assignInfo.value?.submission) return 'mod.assign.view.submission_status.label_1_con_5'

    switch (assignInfo.value?.submission.submission_status) {
        case 1:
            return 'mod.assign.view.submission_status.label_1_con_1'
        case 2:
            return 'mod.assign.view.submission_status.label_1_con_2'
        case 3:
            return 'mod.assign.view.submission_status.label_1_con_3'
        case 4:
            return 'mod.assign.view.submission_status.label_1_con_4'
        default:
            return 'mod.assign.view.submission_status.label_1_con_5'
    }
})
// 评分状态
const ratingStatusText = computed(() => {
    if (assignInfo.value?.submission?.score_result) {
        const scoreResult = assignInfo.value?.submission.score_result
        if (scoreResult) {
            return Object.values(scoreResult).every(result => result.comment && result.is_passed)
                ? 'mod.assign.view.submission_status.label_2_con_1'
                : 'mod.assign.view.submission_status.label_2_con_2'
        } else {
            return 'mod.assign.view.submission_status.label_2_con_2'
        }
    } else {
        return 'mod.assign.view.submission_status.label_2_con_2'
    }
})
// 剩余时间
const remainingTimeText = computed(() => {
    if (!assignInfo.value?.end_date) return '-'

    const endDate = new Date(assignInfo.value.end_date)
    const now = new Date()
    const diffTime = endDate.getTime() - now.getTime()
    if (diffTime >= 0) {
        const diffDays = Math.floor(diffTime / (1000 * 60 * 60 * 24))
        const diffHours = Math.floor((diffTime % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60))
        return `${diffDays} ${t('mod.assign.view.submission_status.label_4_con_1')} ${diffHours} ${t('mod.assign.view.submission_status.label_4_con_2')}`
    } else {
        const _diffTime = diffTime * -1
        const _diffDays = Math.floor(_diffTime / (1000 * 60 * 60 * 24))
        const _diffHours = Math.floor((_diffTime % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60))
        return `${t('mod.assign.view.submission_status.label_4_con_3')}${_diffDays} ${t('mod.assign.view.submission_status.label_4_con_1')} ${_diffHours} ${t('mod.assign.view.submission_status.label_4_con_2')}`
    }
})
function getAssignInfo() {
    loading.value = true
    AssignService.getByCourseId(courseId.value)
        .then(res => {
            assignInfo.value = res
        })
        .finally(() => {
            loading.value = false
            console.log(loading)
        })
}

// 上传
const beforeAvatarUpload = (file: File) => {
    const isLt500M = file.size / 1024 / 1024 < 500
    if (!isLt500M) {
        ElMessage.error(`${t('golbal.upload_err_1')} 500MB!`)
        return false
    }
    return true
}
const handleUpload = (options: UploadRequestOptions) => {
    loading.value = true
    const { file } = options
    AssignService.saveToStudent(assignId.value, file)
        .then(() => {
            getAssignInfo()
        })
        .finally(() => {
            loading.value = false
        })
}

// 提交作业
const submitHandle = () => {
    if(isChecked.value){
        isBorderRed.value = false;
        loading.value = true
        AssignService.submitToStudent(assignId.value)
            .then(() => {
                getAssignInfo()
            })
            .finally(() => {
                loading.value = false
            })
    }else{
        isBorderRed.value = true;
    }
    
}

// 删除作业
const delHandle = () => {
    loading.value = true
    AssignService.delToStudent(assignId.value)
        .then(() => {
            getAssignInfo()
        })
        .finally(() => {
            loading.value = false
        })
}

watch(assignId, getAssignInfo)

onMounted(() => {
    getAssignInfo()
})
</script>

<style lang="less" scoped>
.confirm-submission{
    margin-top: 30px;
    .submission-right{
        padding-left: 30%;
        box-sizing: border-box;
        width: 100%;
        .checkbox-wrap{
            display: flex;
            flex-direction: row;
            align-items: flex-start;
            
            span{
                margin-top: 10px;
                font-size: 14px;
                color: #434341;
            }
        }
        .red-boder{
            border: 1px solid red;
            padding: 0px 10px 10px 10px;
        }
        .tips-txt1{
            font-size: 12px;
            color: #F06423;
            margin: 20px 0;
        }
        .tips-txt2{
            font-size: 14px;
            color: #4C4C4A;
            margin-bottom: 20px;
        }
    }    
}
main {
    display: flex;
    align-items: flex-start;
    width: 100%;

    .navigation-card {
        width: 25%;
    }

    .right-box {
        margin-left: 30px;
        width: calc(75% - 30px);

        h2 {
            margin-bottom: 30px;
            font-size: 30px;
            font-weight: normal;
            line-height: 1.2;
            color: #000;
        }

        .activity-dates {
            margin-bottom: 6px;

            .date-p {
                color: #4c4c4c;
                line-height: 1.6;
                font-size: 15px;

                display: flex;
                align-items: center;
                gap: 10px;
            }
        }

        .tag-list {
            margin-bottom: 40px;
            display: flex;
            align-items: center;
            gap: 5px;
        }

        .submission-status-table {
            margin-top: 30px;

            h3 {
                margin-bottom: 18px;
                font-size: 26px;
                color: #000;
                font-weight: normal;
                line-height: 1.2;
            }

            .submission-summary-table {
                .summary-item {
                    border-top: 1px solid #dee2e6;
                    padding: 8px;
                    background-color: #f2f2f2;

                    display: flex;
                    align-items: flex-start;

                    &:nth-child(2n) {
                        background-color: #fff;
                    }

                    &:last-child {
                        border-bottom: 1px solid #dee2e6;
                    }

                    .label {
                        width: 150px;
                        color: #000;
                        font-size: 12px;
                        line-height: 1.6;
                        flex-shrink: 0;
                    }

                    .ted {
                        color: #212529;
                        font-size: 12px;
                        line-height: 1.6;
                        flex-grow: 1;

                        table {
                            width: 100%;
                            border: 1px solid #dee2e6;
                            border-collapse: collapse;
                            border-spacing: 0;

                            tr {
                                background-color: #f2f2f2;

                                &:nth-child(2n) {
                                    background-color: #fff;
                                }

                                td {
                                    border: 1px solid #dee2e6;
                                    padding: 6px;
                                    color: #212529;
                                    font-size: 12px;
                                    line-height: 1.6;

                                    &:first-child {
                                        color: #000;
                                    }
                                }
                            }
                        }

                        .file-upload-submission {
                            padding: 15px;
                            max-width: 550px;
                            background-color: #e6e6e6;

                            .file-time {
                                margin-bottom: 20px;

                                display: flex;
                                align-items: center;
                                justify-content: space-between;

                                .file-name {
                                    color: #000;

                                    display: flex;
                                    align-items: center;
                                    gap: 6px;
                                }
                            }

                            h4 {
                                margin-bottom: 8px;
                                color: #000;
                                font-size: 20px;
                                line-height: 1.2;
                                font-weight: normal;
                            }

                            .refresh-btn {
                                margin-top: 10px;
                                display: flex;
                                justify-content: flex-end;
                            }
                        }
                    }
                }
            }

            .btn-list {
                margin-top: 30px;
                display: flex;
                justify-content: center;
                flex-wrap: wrap;
                gap: 10px;

                .tips {
                    width: 100%;
                    text-align: center;
                    color: #212529;
                    font-size: 12px;
                }
            }
        }
    }
}
</style>
